<template>
  <div class="app-container">
    <!-- 网站头部 -->
    <div class="site-header">
      <h1>{{ siteTitle }}</h1>
      <p>{{ siteDescription }}</p>
    </div>

    <!-- 轮播图区域 -->
    <div class="banner">
      <el-carousel height="300px">
        <el-carousel-item v-for="item in 4" :key="item">
          <h3 class="small">{{ item }}</h3>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧文章列表 -->
      <div class="article-list">
        <div class="article-item" v-for="article in articleList" :key="article.articleId">
          <div class="article-header">
            <h2 class="article-title">
              <router-link :to="'/cms/frontend/detail/' + article.articleId">
                {{ article.title }}
              </router-link>
            </h2>
            <div class="article-meta">
              <span class="author">作者：{{ article.author }}</span>
              <span class="time">发布时间：{{ parseTime(article.publishTime) }}</span>
              <span class="views">浏览：{{ article.viewCount }}</span>
            </div>
          </div>
          <div class="article-summary">
            <p>{{ article.summary }}</p>
          </div>
          <div class="article-tags">
            <el-tag v-for="tag in article.tags" :key="tag.tagId" size="mini">{{ tag.tagName }}</el-tag>
          </div>
        </div>
        
        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next, jumper"
          />
        </div>
      </div>

      <!-- 右侧边栏 -->
      <div class="sidebar">
        <!-- 热门文章 -->
        <div class="sidebar-block">
          <h3>热门文章</h3>
          <ul class="hot-articles">
            <li v-for="article in hotArticles" :key="article.articleId">
              <router-link :to="'/cms/frontend/detail/' + article.articleId">
                {{ article.title }}
              </router-link>
            </li>
          </ul>
        </div>

        <!-- 标签云 -->
        <div class="sidebar-block">
          <h3>标签云</h3>
          <div class="tag-cloud">
            <el-tag 
              v-for="tag in tagList" 
              :key="tag.tagId" 
              size="small" 
              @click="handleTagClick(tag)"
              class="tag-item"
            >
              {{ tag.tagName }}
            </el-tag>
          </div>
        </div>

        <!-- 友情链接 -->
        <div class="sidebar-block">
          <h3>友情链接</h3>
          <ul class="friend-links">
            <li v-for="link in friendLinkList" :key="link.linkId">
              <a :href="link.linkUrl" :target="link.target">{{ link.linkName }}</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FrontendHome",
  data() {
    return {
      // 网站标题
      siteTitle: "官方门户网站",
      // 网站描述
      siteDescription: "这是官方门户网站，用于发布最新新闻资讯",
      // 文章列表
      articleList: [],
      // 热门文章
      hotArticles: [],
      // 标签列表
      tagList: [],
      // 友情链接列表
      friendLinkList: [],
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    this.getList();
    this.getHotArticles();
    this.getTagList();
    this.getFriendLinkList();
  },
  methods: {
    /** 获取文章列表 */
    getList() {
      // 模拟数据
      this.articleList = [
        {
          articleId: 1,
          title: "若依CMS系统正式发布",
          author: "若依科技",
          publishTime: new Date(),
          viewCount: 128,
          summary: "若依CMS内容管理系统正式发布，提供强大的内容管理功能...",
          tags: [
            { tagId: 1, tagName: "系统发布" },
            { tagId: 2, tagName: "CMS" }
          ]
        },
        {
          articleId: 2,
          title: "如何使用若依CMS管理系统",
          author: "若依科技",
          publishTime: new Date(),
          viewCount: 96,
          summary: "本文将详细介绍如何使用若依CMS管理系统进行内容管理...",
          tags: [
            { tagId: 3, tagName: "使用指南" },
            { tagId: 2, tagName: "CMS" }
          ]
        }
      ];
      this.total = 20;
    },
    /** 获取热门文章 */
    getHotArticles() {
      // 模拟数据
      this.hotArticles = [
        { articleId: 1, title: "若依CMS系统正式发布" },
        { articleId: 2, title: "如何使用若依CMS管理系统" },
        { articleId: 3, title: "若依CMS系统功能介绍" }
      ];
    },
    /** 获取标签列表 */
    getTagList() {
      // 模拟数据
      this.tagList = [
        { tagId: 1, tagName: "系统发布" },
        { tagId: 2, tagName: "CMS" },
        { tagId: 3, tagName: "使用指南" },
        { tagId: 4, tagName: "功能介绍" }
      ];
    },
    /** 获取友情链接 */
    getFriendLinkList() {
      // 模拟数据
      this.friendLinkList = [
        { linkId: 1, linkName: "若依官网", linkUrl: "http://ruoyi.vip", target: "_blank" },
        { linkId: 2, linkName: "Vue官网", linkUrl: "https://vuejs.org", target: "_blank" }
      ];
    },
    /** 分页处理 */
    handleCurrentChange(page) {
      this.pageNum = page;
      this.getList();
    },
    /** 标签点击处理 */
    handleTagClick(tag) {
      this.$router.push(`/cms/frontend/list?tagId=${tag.tagId}`);
    }
  }
};
</script>

<style scoped>
.site-header {
  text-align: center;
  margin-bottom: 20px;
}

.site-header h1 {
  font-size: 28px;
  color: #333;
}

.site-header p {
  font-size: 16px;
  color: #666;
}

.banner {
  margin-bottom: 20px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.main-content {
  display: flex;
  flex-direction: row;
}

.article-list {
  flex: 3;
  margin-right: 20px;
}

.article-item {
  border-bottom: 1px solid #eee;
  padding: 20px 0;
}

.article-item:last-child {
  border-bottom: none;
}

.article-title {
  margin: 0 0 10px 0;
}

.article-title a {
  color: #333;
  text-decoration: none;
}

.article-title a:hover {
  color: #409EFF;
}

.article-meta {
  font-size: 14px;
  color: #999;
  margin-bottom: 10px;
}

.article-meta span {
  margin-right: 15px;
}

.article-summary {
  margin-bottom: 10px;
}

.article-summary p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.tag-item {
  cursor: pointer;
  margin-right: 5px;
}

.sidebar {
  flex: 1;
}

.sidebar-block {
  background: #f8f9fa;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
}

.sidebar-block h3 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.hot-articles,
.friend-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hot-articles li,
.friend-links li {
  padding: 5px 0;
  border-bottom: 1px dashed #eee;
}

.hot-articles li:last-child,
.friend-links li:last-child {
  border-bottom: none;
}

.hot-articles a,
.friend-links a {
  color: #666;
  text-decoration: none;
}

.hot-articles a:hover,
.friend-links a:hover {
  color: #409EFF;
}

.tag-cloud .el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>